<template>
    <view :class="props.id == 0 ? 'cardleft' : 'cardleft1'">
        <view style="font-size: 15px;">
            {{ cardData.number || cardData.name || cardData.id }}
        </view>
        <el-row style="font-size: 12px; margin-top: 20rpx;">
            <el-col :span="8">{{ titlelData.lable1 }}</el-col>
            <el-col :span="8">{{ titlelData.lable2 }}</el-col>
            <el-col :span="8">{{ titlelData.lable3 }}</el-col>
        </el-row>
        <el-row style="font-size: 15px;margin-top: 20rpx;">
            <el-col :span="8">{{ cardData.goods || timestampToDateFormat(cardData.createTime) || cardData.creator }}</el-col>
            <el-col :span="8">{{ cardData.specification || timestampToDateFormat(cardData.createTime) ||
                cardData.effectiveTime.substring(0, 10) }}</el-col>
            <el-col :span="8"><el-tag type="primary" effect="dark" size="small" round>{{ cardData.unit }}</el-tag></el-col>
        </el-row>
    </view>

    <view class="cardright" v-if="props.id == 0">
        <el-image :src="url" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" fit="cover" />
    </view>
</template>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue';
import { defineProps, defineEmits } from 'vue';
import { Navigate } from '@/utils';

const props = defineProps({
    id: {
        type: Number,
        default: 0
    },
    cardData: {
        type: Object,
        default: {}
    },
    titlelData: {
        type: Object,
        default: {}
    }
});

function timestampToDateFormat(timestamp) {
    const dateObj = new Date(timestamp); // 创建Date对象
    const year = dateObj.getFullYear(); // 获取年份
    const month = ("0" + (dateObj.getMonth() + 1)).slice(-2); // 获取月份，并补零
    const day = ("0" + dateObj.getDate()).slice(-2); // 获取日期，并补零

    return `${year}-${month}-${day}`; // 返回转换后的日期格式
}

const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'


</script>

<style scoped>
.content {
    padding: 20rpx;
    background-color: #DDDDDD;
}

.el-image {
    height: 100%;
}

.pcomponent {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: white;
    border-radius: 5rpx;
    margin-top: 20rpx;
}

.cardleft {
    padding: 20rpx;
    width: 70%;
    height: 140rpx;
}

.cardleft1 {
    padding: 20rpx;
    width: 100%;
    height: 140rpx;
}

.cardright {
    flex: 1;
}

.pcomponent {
    /* 组件样式 */
}

.el-col {
    overflow: hidden;
    /* 确保超出容器的内容被裁剪 */
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.fixedBtn {
    position: fixed;
    right: 100rpx;
    bottom: 100rpx;
}
</style>